* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #eaeef0;
}

.loader {
	position: relative;
	display: flex;
}

.loader>span {
	position: relative;
	width: 250px;
	height: 250px;
	background: #eaeef0;
	border: 6px solid #eaeef0;
	border-radius: 50%;
	/* 添加阴影 */
	box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, .15);
	overflow: hidden;
}

.loader>span::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 10px 10px 20px rgba(0, 0, 0, .5),
	inset -5px -5px 15px rgba(255, 255, 255, 1);
}

.loader>span::after {
	content: '';
	position: absolute;
	inset: 40px;
	background: #eaeef0;
	border: 3px solid #eaeef0;
	border-radius: 50%;
	box-shadow: -8px -8px 25px rgba(255, 255, 255, 1),
	8px 8px 25px rgba(0, 0, 0, .25),
	inset 3px 3px 10px rgba(0, 0, 0, .15),
	inset -1px -1px 15px rgba(255, 255, 255, 1);
}
.loader>span>i {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	filter: blur(-5px);
	background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
	animation: animate 1s linear infinite;
}

@keyframes animate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.rocket {
	position: absolute;
	inset: 50px;
	z-index: 10;
	display: flex;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.rocket>.fa-rocket {
	position: absolute;
	color: #ff518c;
	font-size: 3.5em;
	-webkit-text-stroke: 2px #000;
	animation: animateRocket 0.2s linear infinite;
}

@keyframes animateRocket {
	0%, 100% {
		transform: translate(0px, 0px) rotate(-45deg);
	}
	50% {
		transform: translate(0px,3px) rotate(-45deg);
	}
}

.loader>.rocket>.fa-cloud {
	position: absolute;
	top: calc(35px * var(--i));
	left: calc(35px * var(--i));
	font-size: 2em;
	color: #fff;
	-webkit-text-stroke: 2px #000;
	animation: animateClouds 1s linear infinite;
	animation-delay: calc(-0.5s * var(--i));
}

@keyframes animateClouds {
	0% {
		transform: translateY(calc(-35 * 5px));
	}
	100% {
		transform: translateY(calc(35 * 5px));
	}
}